<template>
	<u-popup :show="visible" mode="center" round="16rpx" :safeAreaInsetBottom="false" @close="hide">
		<view class="quick-group-qrcode">
			<u-image width="622rpx" height="400rpx" :showMenuByLongpress="false"
				src="https://file.casugn.com/storecompcard/static/img/Group 427318913@2x_1683870500740.png"></u-image>
			<view class="quick-group-qrcode__qrcode">
				<u-image width="280rpx" height="280rpx" radius="14rpx" :src="qrcodeImg">
					<template slot="loading">
						<u-loading-icon></u-loading-icon>
					</template>
				</u-image>
			</view>
			<view class="quick-group-qrcode__tip">扫描二维码加入我们</view>
			<view class="quick-group-qrcode__info">
				<u-image width="96rpx" height="96rpx" radius="4rpx" :src="quickGroupUserInfo.head"></u-image>
				<view class="quick-group-qrcode__info-left">
					<text>{{quickGroupUserInfo.name}}</text>
					<text>邀请您加入群聊</text>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'

	export default {
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		},
		computed: {
			...mapGetters(['quickGroupUserInfo']),
		},
		data() {
			return {
				visible: false,
				loading: false,

				page: '',
				scene: '',
				qrcodeImg: '',
			}
		},
		methods: {
			async show(record) {
				this.visible = true
				this.page = record.page
				this.scene = String(record.id)
				this.getQrCode(record)
			},
			hide() {
				this.visible = false
			},
			async getQrCode() {
				let params = {
					page: this.page,
					scene: this.scene,
					check_page: false
				}
				this.loading = true
				this.$api.getPhotoUrl(params)
					.then((res) => {
						if (res.success) {
							this.qrcodeImg = res.result
						}
					}).finally(() => {
						this.loading = false
					})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.quick-group-qrcode {
		width: 622rpx;

		.quick-group-qrcode__qrcode {
			margin: -280rpx auto 0;
			width: 280rpx;
			height: 280rpx;
		}

		.quick-group-qrcode__tip {
			position: relative;
			padding: 32rpx 40rpx 42rpx;
			font-size: 28rpx;
			color: #1D2129;
			line-height: 40rpx;
			text-align: center;

			&::before {
				content: "";
				position: absolute;
				left: 40rpx;
				right: 40rpx;
				bottom: 0;
				border-bottom: 1rpx dashed #E5E6EB;
			}
		}

		.quick-group-qrcode__info {
			padding: 40rpx 40rpx 50rpx;

			display: flex;
			align-items: center;

			.quick-group-qrcode__info-left {
				margin-left: 16rpx;

				text {
					display: block;
				}

				text:nth-child(1) {
					font-size: 32rpx;
					font-weight: 600;
					color: #1D2129;
					line-height: 44rpx;
				}

				text:nth-child(2) {
					margin-top: 16rpx;
					font-size: 28rpx;
					color: #86909C;
					line-height: 40rpx;
				}
			}
		}
	}
</style>